<template>
    <div id="banner-add">
        <el-form ref="formRef" label-width="120px" :model="formData" :rules="formRules">
            <el-form-item label="图片链接 link" prop="link">
                <el-input v-model="formData.link" />
            </el-form-item>

            <el-form-item label="图片提示 alt" prop="alt">
                <el-input v-model="formData.alt" />
            </el-form-item>

            <el-form-item label="选择图片">
                <el-upload class="avatar-uploader" :show-file-list="false" :http-request="onChange">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <!-- 这个输入框的内容，不是用户手动填写的，而是选择完图片之后，主动设置的 -->
            <el-form-item label="图片Base64 img" prop="img">
                <el-input v-model="formData.img" disabled />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" :loading="isLoading" @click="bannerAdd">新增</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { addBanner } from "@/api/banner.js"
import { ElMessage } from "element-plus"
export default {
    name: "banner-add",
    data() {
        return {
            isLoading: false,
            formData: {
                img: '',
                alt: '',
                link: ''
            },
            formRules: {
                img: [{ required: true, message: "必填项" }],
                alt: [{ required: true, message: "必填项" }],
                link: [{ required: true, message: "必填项" }],
            },
            imageUrl: "",
        }
    },
    methods: {
        onChange(options) {
            const file = options.file;
            const typeRight = ["image/png", "image/jpg", "image/jpeg"].includes(file.type);
            const sizeRight = file.size / 1024 / 1024 < 2;
            if (!typeRight || !sizeRight) {
                ElMessage.error("校验不通过，请检查文件类型与大小");
                return false;
            }
            const fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload = () => {
                this.imageUrl = fileReader.result;
                this.formData.img = fileReader.result;
            };
            return false;
        },
        async bannerAdd() {
            try {
                await this.$refs.formRef.validate();
                this.isLoading = true;
                addBanner(this.formData).
                    then(() => {
                    }).finally(() => {
                        this.isLoading = false;
                    })
            } catch {

            }
        }
    },
    mounted() {
        // console.log(this.$refs.formRef);
    }
}
</script>

<style scoped>
.avatar-uploader {
    display: flex;
    justify-content: space-around;

    /* flex-direction: ; */
}

.avatar-uploader .avatar {
    width: 158px;
    height: 158px;
    display: block;
}

.el-form-item {
    padding-bottom: 5px;
}
</style>
<style >
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: rgb(9, 167, 202);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 158px;
    height: 158px;
    text-align: center;
}

#banner-add {
    width: 400px;
}
</style>